<template>
  <div class="card content-box">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px">
      <el-input v-model="ruleForm.id" type="hidden" />

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="t('system.role.parent')" prop="parent_id">
            <el-select-v2
              v-model="ruleForm.parent_id"
              filterable
              :options="Menus"
              :loading="loading"
              placeholder=""
              :disabled="ruleForm.id > 0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('system.role.name')" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('common.status')" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="10">{{ $t("common.normal") }}</el-radio>
              <el-radio :label="20">{{ $t("common.disable") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="dynamicForm">
import { reactive, ref, onBeforeMount } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { roleList, roleCreate, roleUpdate, roleDetail } from "@/api/modules/system";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";

const route = useRoute();
const { t } = useI18n();
const Menus = ref([]);

const ruleForm = reactive({
  id: route.params.id,
  name: "",
  parent_id: 0,
  status: 10
});

onBeforeMount(() => {
  getMenuList();
  if (route.params.id > 0) {
    roleDetail({ id: route.params.id }).then(response => {
      ruleForm.id = response.data.id;
      ruleForm.name = response.data.name;
      ruleForm.parent_id = Number(response.data.parent_id);
    });
  }
});

const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const loading = ref(false);
const timeoutId = ref();

const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }]
});

const getMenuList = (query?: string) => {
  loading.value = true;
  roleList({ name: query })
    .then(response => {
      Menus.value = [];
      Menus.value.push({ value: 0, label: "无" });
      response.data.list.forEach(item => {
        Menus.value.push({ value: Number(item.id), label: item.name });
      });
    })
    .finally(() => {
      loading.value = false;
      timeoutId.value = null;
    });
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      const action = ruleForm.id > 0 ? roleUpdate : roleCreate;
      action(ruleForm).then(response => {
        ElMessage.success(response.message);
        setTimeout(() => {
          if (route.meta.isAffix) return;
          tabStore.removeTabs(route.fullPath);
          keepAliveStore.removeKeepAliveName(route.name as string);
        }, 200);
      });
    } else {
      ElMessage.error("请根据提示输入信息！");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
@import "./edit.scss";
</style>
